<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                display: flex;
            }
            @font-face {
                font-family: "Qagan";
                src: url("Qagan.woff");
            }
            .mongolian-text {
                font-family: "Qagan";
                -ms-writing-mode: tb-lr;
                -webkit-writing-mode: vertical-lr;
                -webkit-text-orientation: sideways-right;
                writing-mode: vertical-lr;
                text-orientation: sideways-right;
                font-size: 18px;
                height: 300px;
                text-align: justify;
            }
        </style>
    </head>
    <body>
        <div class="mongolian-text">5   22                                                                        </div>
        <div class="mongolian-text" style="height: 500px">《ᠥᠪᠥᠷ ᠮᠣᠩᠭᠣᠯ᠎ᠤᠨ ᠨᠢᠭᠡ ᠭᠠᠷᠠᠭ᠎ᠤᠨ ᠵᠠᠰᠠᠭ᠎ᠤᠨ ᠶᠠᠪᠤᠳᠠᠯ》 ᠭᠡᠬᠦ ᠪᠤᠯᠤᠩ᠎ᠨᠢ ᠲᠠᠨ᠎ᠳᠤ ᠭᠠᠷᠠᠭ ᠪᠦᠷᠢ ᠵᠢᠨ ᠥᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ᠎ᠤ ᠨᠠᠮ᠎ᠤᠨ ᠬᠣᠷᠢᠶ᠎ᠠ᠂ ᠵᠠᠰᠠᠭ᠎ᠤᠨ ᠣᠷᠳᠣᠨ᠎ᠤ ᠤᠳᠤᠷᠢᠳᠤᠯᠭ᠎ᠠ ᠵᠢᠨ ᠵᠠᠰᠠᠭ᠎ᠤᠨ ᠶᠠᠪᠤᠳᠠᠯ᠎ᠤᠨ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ᠂ ᠥᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ᠎ᠤ ᠨᠡᠢ᠌ᠲᠡᠯᠡᠭᠰᠡᠨ ᠲᠥᠷᠥ ᠵᠢᠨ ᠪᠣᠳᠣᠯᠭ᠎ᠠ ᠬᠢᠭᠡᠳ ᠲᠡᠭᠦᠨ᠎ᠤ ᠲᠠᠢ᠌ᠯᠤᠮᠵᠢ ᠵᠢ ᠡᠮᠬᠢᠯᠡᠨ ᠲᠢᠭᠯᠡᠵᠦ᠂ ᠭᠠᠷᠠᠭ ᠪᠦᠷᠢ ᠵᠢᠨ ᠵᠠᠰᠠᠭ᠎ᠤᠨ ᠰᠢᠨ᠎ᠡ ᠶᠠᠪᠤᠳᠠᠯ᠎ᠢ ᠲᠦᠷᠭᠡᠨ ᠣᠢ᠌ᠯᠠᠭ᠋ᠠᠭᠤᠯᠬᠤ ᠪᠣᠯᠣᠨ᠎ᠠ᠃ ᠤᠳᠤᠷᠢᠳᠤᠯᠭ᠎ᠠ ᠵᠢᠨ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ</div>
        <div class="mongolian-text">3 ᠳ᠋ᠤᠭ᠋ᠠᠷ ᠰᠠᠷ᠎ᠠ ᠵᠢᠨ 31᠎ᠤ ᠡᠳᠦᠷ᠎ᠠᠴᠠ 4 ᠳ᠋ᠦ᠍ᠭᠡᠷ ᠰᠠᠷ᠎ᠠ ᠵᠢᠨ 1᠎ᠤ ᠡᠳᠦᠷ ᠪᠣᠯᠲᠠᠯ᠎ᠠ᠂ ᠥᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ᠎ᠤ ᠨᠠᠮ᠎ᠤᠨ ᠬᠣᠷᠢᠶᠠᠨ᠎ᠤ ᠳᠡᠳ᠋ ᠱᠦᠵᠢ᠂ ᠥᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ᠎ᠤ ᠠᠷᠠᠳ᠎ᠤᠨ ᠵᠠᠰᠠᠭ᠎ᠤᠨ ᠣᠷᠳᠣᠨ᠎ᠤ ᠲᠡᠷᠢᠭᠦᠯᠡᠭᠴᠢ ᠸᠠᠩ ᠯᠢ ᠰᠢᠶᠠ ᠴᠢᠬᠤᠯᠠ ᠶᠡᠬᠡ ᠲᠥᠷᠥᠯ ᠵᠦᠢ᠍ᠯ᠎ᠤᠨ ᠪᠦᠲᠦᠭᠡᠨ ᠪᠠᠢ᠌ᠭᠤᠯᠤᠯᠲᠠ᠂ ᠠᠮᠢ ᠠᠬᠤᠢ ᠣᠷᠴᠢᠨ ᠲᠣᠭᠣᠷᠢᠨ᠎ᠤ ᠬᠠᠮᠠᠭ᠋ᠠᠯᠠᠯᠲᠠ ᠵᠢᠨ ᠰᠢᠮᠳᠠᠭᠤᠯᠤᠨ ᠪᠠᠢ᠌ᠴᠠᠭ᠋ᠠᠯᠲᠠ ᠵᠢᠨ ᠠᠰᠠᠭᠤᠳᠠᠯ᠎ᠢ ᠴᠡᠭᠴᠡᠯᠡᠨ ᠰᠠᠢ᠌ᠵᠢᠷᠠᠭᠤᠯᠬᠤ᠂ ᠣᠶ ᠰᠢᠭᠤᠢ ᠨᠤᠲᠤᠭ ᠪᠡᠯᠴᠢᠭᠡᠷ᠎ᠢ ᠡᠪᠳᠡᠨ ᠰᠦᠢ᠍ᠳᠬᠡᠭᠰᠡᠨ ᠦᠢᠯᠡ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ ᠵᠢ ᠴᠡᠭᠴᠡᠯᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠵᠡᠷᠭᠡ ᠲᠠᠯ᠎ᠠ᠎ᠪᠠᠷ ᠬᠢᠩᠭ᠋ᠠᠨ ᠠᠢ᠌ᠮᠠᠭ᠎ᠲᠤ ᠭᠦᠨᠵᠡᠭᠡᠢ᠌ᠷᠡᠨ ᠪᠠᠢ᠌ᠴᠠᠭ᠋ᠠᠨ ᠰᠤᠳᠤᠯᠤᠯᠲᠠ ᠬᠢᠪᠡ</div>
    </body>
    <script src="MongolianEllipsis.js"></script>
    <script>
        applyMongolianEllipsis({
            className: "mongolian-text", //类名
            fontName: "Qagan", //字体名
            columns: 3, //列数
            lineHeight: 24, //默认24
        });
    </script>
</html>
